<template>
  <div class="wly_child_king_print"
       ref="print">
    <div class="king_title_tips">
      <div class="tips">
        本运单经承运双方签章后，具有合同效力。承运人与托运人之间的权利、义务责任界限用于以下文本规定
      </div>
    </div>
    <h1 style="text-align:center;">门店配送单</h1>
    <div class="king_content detail-row">
      <div class="span10">
        发货方：{{form.name}}
      </div>
      <div class="span5">
        <span>地址:</span>
        <span>
          <!-- {{$tools.areaFilter(form.fromProvince1,form.fromCity1,form.fromDistrict1)}} -->
          {{form.area}}
          {{form.from}}</span>
      </div>
      <div class="span3">
        派车单号：{{form.pactCode}}
      </div>
      <table cellspacing="0"
             cellpadding="0"
             border="0"
             class="king_print_table"
             style="width:100%;">
        <tr>
          <td>承运方</td>
          <td style="width:30%;">{{form.supplierName}}</td>
          <td>总箱数</td>
          <td style="width:15%;">{{form.totalAmount}}</td>
          <td>总体积（立方）</td>
          <td style="width:15%;">{{form.totalVolume}}</td>
        </tr>
        <tr>
          <td>收货方</td>
          <td colspan="5">{{form.endUserName}}</td>
        </tr>
        <tr>
          <td>收货地址</td>
          <td colspan="5">
            <!-- {{$tools.areaFilter(form.toProvince1,form.toCity1,form.toDistrict1)}} -->
            {{form.toArea}}
            {{form.to}}
          </td>
        </tr>
        <tr>
          <td>联系电话</td>
          <td colspan="5">{{form.toContact}}</td>
        </tr>
      </table>
      <div class="span10"
           style="margin-bottom: 20px;">
        <div style="float:right;margin-right: 20px;">
          制单日期：{{form.createTime}}
        </div>
      </div>
      <div style="clear:both;"></div>
      <div class="list_content">
        <div class="list_content_sub list_content_sub1">
          <div>经办人：{{form.creator}}</div>
          <div>发货件数：{{form.totalAmount}}</div>
        </div>
        <div class="list_content_sub list_content_sub2">
          <div>提货人及日期：</div>
          <div>车牌号：</div>
          <div>身份证号：</div>
          <div>提货件数：</div>
        </div>
        <div class="list_content_sub list_content_sub3">
          <div>收件人：{{form.toMan}}</div>
          <div>签收日期：</div>
          <div>签收件数：</div>
        </div>
      </div>
      <div style="clear:both;"></div>
      <p>1.本单一式四份（为仓库、承运方、收件人、签单返回各一份）</p>
      <p>2.孩子王要求承运方将货物运抵后、收货方收货后签字确认其中一联返回孩子王物流部，您的签字代表您已认可此单所有的商品数量</p>
      <p class="kingContent">3.一切货物异常收货方应在交接后二日内向发货方反馈，并提供有效证据、证明，在此期间内无反馈即表示默认收到以上所列之商品明细，配送中心不在承担因异常产生的所有责任。</p>
      <table cellspacing="0"
             cellpadding="0"
             border="0"
             class="king_print_table content_height"
             style="width:100%;">
        <tr>
          <td>源单据号</td>
          <td>商品编码</td>
          <td>商品条码</td>
          <td>商品名称</td>
          <td>数量</td>
        </tr>
        <template v-for="(item,index) in form.goodsList.slice(0,11)">
          <tr :key="index"
              class="tes">
            <td></td>
            <td>{{item.barCode}}</td>
            <td>{{item.barCode}}</td>
            <td>{{item.name}}</td>
            <td>{{item.goodsLstQty}}</td>
          </tr>
        </template>
      </table>
      <table v-show='form.goodsList.length>11'
             cellspacing="0"
             cellpadding="0"
             border="0"
             class="king_print_table content_height"
             style="width:100%;">
        <tr>
          <td>源单据号</td>
          <td>商品编码</td>
          <td>商品条码</td>
          <td class="bill_td">商品名称</td>
          <td>数量</td>
        </tr>
        <template v-for="(item,index) in form.goodsList.slice(12,40 )">
          <tr :key="index"
              class="tes">
            <td></td>
            <td>{{item.barCode}}</td>
            <td>{{item.barCode}}</td>
            <td class="bill_td">{{item.name}}</td>
            <td>{{item.goodsLstQty}}</td>
          </tr>
        </template>
      </table>
      <table v-show='form.goodsList.length>37'
             cellspacing="0"
             cellpadding="0"
             border="0"
             class="king_print_table content_height"
             style="width:100%;">
        <tr>
          <td>源单据号</td>
          <td>商品编码</td>
          <td>商品条码</td>
          <td class="bill_td">商品名称</td>
          <td>数量</td>
        </tr>
        <template v-for="(item,index) in form.goodsList.slice(41,68)">
          <tr :key="index"
              class="tes">
            <td></td>
            <td>{{item.barCode}}</td>
            <td>{{item.barCode}}</td>
            <td class="bill_td">{{item.name}}</td>
            <td>{{item.goodsLstQty}}</td>
          </tr>
        </template>
      </table>
      <table v-show='form.goodsList.length>68'
             cellspacing="0"
             cellpadding="0"
             border="0"
             class="king_print_table content_height"
             style="width:100%;">
        <tr>
          <td>源单据号</td>
          <td>商品编码</td>
          <td>商品条码</td>
          <td class="bill_td">商品名称</td>
          <td>数量</td>
        </tr>
        <template v-for="(item,index) in form.goodsList.slice(69,96)">
          <tr :key="index"
              class="tes">
            <td></td>
            <td>{{item.barCode}}</td>
            <td>{{item.barCode}}</td>
            <td class="bill_td">{{item.name}}</td>
            <td>{{item.goodsLstQty}}</td>
          </tr>
        </template>
      </table>
    </div>
  </div>
</template>

<script>
export default {
  name: 'ChildkingPrint',
  data () {
    return {
      form: {
        name: "淮安中心仓9030",
        area: "江苏省淮安市涟水县",
        from: "安达市第三课大街1901路xxxx商铺文化体育中心",
        pactCode: "695588217741",
        supplierName: "云腾",
        totalAmount: 20,
        totalVolume: 0.52212,
        endUserName: "淮安万达",
        toArea: "江苏省淮安市清江浦区",
        to: "金森格物流园绘声绘色绘画泊南中学",
        toContact: 1826817715,
        createTime: "2019-07-01",
        creator: "张珊珊",
        totalAmount: 25,
        toMan: "流星",
        goodsList: [
          { barCode: "8350677960", name: "数控技术萨克斯", goodsLstQty: 10 },
          { barCode: "8350677960", name: "数控技术萨克斯", goodsLstQty: 10 },
          { barCode: "8350677960", name: "数控技术萨克斯", goodsLstQty: 10 },
          { barCode: "8350677960", name: "数控技术萨克斯", goodsLstQty: 10 },
          { barCode: "8350677960", name: "数控技术萨克斯", goodsLstQty: 10 },
          { barCode: "8350677960", name: "数控技术萨克斯", goodsLstQty: 10 },
          { barCode: "8350677960", name: "数控技术萨克斯", goodsLstQty: 10 },
          { barCode: "8350677960", name: "数控技术萨克斯", goodsLstQty: 10 },
          { barCode: "8350677960", name: "数控技术萨克斯", goodsLstQty: 10 },
          { barCode: "8350677960", name: "数控技术萨克斯", goodsLstQty: 10 },
          { barCode: "8350677960", name: "数控技术萨克斯", goodsLstQty: 10 },
          { barCode: "8350677960", name: "数控技术萨克斯", goodsLstQty: 10 },
          { barCode: "8350677960", name: "数控技术萨克斯", goodsLstQty: 10 },
          { barCode: "8350677960", name: "数控技术萨克斯", goodsLstQty: 10 },
          { barCode: "8350677960", name: "数控技术萨克斯", goodsLstQty: 10 },
          { barCode: "8350677960", name: "数控技术萨克斯", goodsLstQty: 10 },
          { barCode: "8350677960", name: "数控技术萨克斯", goodsLstQty: 10 },
          { barCode: "8350677960", name: "数控技术萨克斯", goodsLstQty: 10 },
          { barCode: "8350677960", name: "数控技术萨克斯", goodsLstQty: 10 },
        ],
      },
    }
  },
  mounted () {
    this.print()
  },
  beforeDestroy () {
    window.close()
  },
  methods: {
    print () {
      setTimeout(() => {
        // this.$print(this.$refs.print)
        if (window.document.execCommand("print")) window.close();
        window.print();

      }, 500)
    }
  },
  computed: {
  }
}
</script>

<style lang="scss">
@media print {
  .wly_child_king_print {
    padding: 12px;
    font-size: 10px;

    .king_title_tips {
      height: 40px;
      .tips {
        width: 50%;
        float: right;
        line-height: 14px;
        padding-bottom: 4px;
        border-bottom: 1px solid black;
      }
    }
    .content_height {
      height: 370px;
      margin-bottom: 100px;
    }
    .king_content {
      .span10,
      .span3,
      .span5 {
        font-size: 10px;
        padding: 5px;
      }
      .span3 {
        width: 32%;
      }
      .span5 {
        width: 49%;
      }
      .kingContent {
        line-height: 20px;
      }
      .list_content {
        .list_content_sub {
          width: 33%;
          float: left;
        }
        .list_content_sub1 {
          div {
            margin-bottom: 28px;
          }
        }
        .list_content_sub2 {
          div {
            margin-bottom: 10px;
          }
        }
        .list_content_sub3 {
          div {
            margin-bottom: 18px;
          }
        }
      }
      table {
        font-size: 10px;
        border-top: 1px solid #6e6f71;
        border-left: 1px solid #6e6f71;

        td {
          border-bottom: 1px solid #6e6f71;
          border-right: 1px solid #6e6f71;
          padding: 11px;
        }
      }
      .king_print_table {
        .tes {
          //     .bill_td{
          //      width: 40%;
          //     z-index: 999;
          // }
        }
      }
    }
  }
}
@media screen {
  .wly_child_king_print {
    display: none;
  }
}
</style>
